<!doctype html>
<html>
<head>
    <include file="public:headtop"/>
    <link href="/static/css/general.css" rel="stylesheet">
    <link href="/static/css/cate.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/calculator.css"/>
    <style>
        #Jiangli {
            font-size: 20px;
            margin: 20px 0;
            text-align: center;
        }

        #Jiangli b.jiangli {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
<include file="public:headmini1"/>
<div class="container">
    <h2 class="box-title">
        <a href="{:U('Index/rule')}" class="pull-right">查看奖励规则</a>
        添加商品计算奖励
    </h2>
    <form action="">
        <table class="table">
            <tr>
                <td width="30%">
                    <select name="cate" id="cate" class="form-control">
                        <option value="">类别</option>
                    </select>
                </td>
                <td width="70%">
                    <select name="goods" id="goods" class="form-control" required>
                        <option value="">产品</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="number" name="num" value="1" id="num" class="form-control" required min="1"/>
                </td>
                <td>
                    <button class="btn btn-block" type="submit">添加</button>
                </td>
            </tr>
        </table>
    </form>

    <table class="calc" id="cid1">
        <thead>
        <tr>
            <th colspan="4" class="calc-title">汽车膜奖励：<span class="money">￥{$award.1.award}元</span></th>
        </tr>
        <tr class="calc-header">
            <td>名称</th>
            <td>数量</th>
            <td colspan="2">销售额</th>
        </tr>
        </thead>
        <tbody>
        <if condition="$award">
            <tr>
                <td>本月已完成</td>
                <td>{$award.1.count}</td>
                <td>{$award.1.money}</td>
                <td>&nbsp;</td>
            </tr>
        </if>
        </tbody>
        <tfoot>
        <tr>
            <td>总计：</td>
            <td>0</td>
            <td colspan="2">0</td>
        </tr>
        </tfoot>
    </table>

    <table class="calc" id="cid2">
        <thead>
        <tr>
            <th colspan="4" class="calc-title">建筑膜奖励：<span class="money">￥{$award.2.award}元</span></th>
        </tr>
        <tr class="calc-header">
            <td>名称</th>
            <td>数量</th>
            <td colspan="2">销售额</th>
        </tr>
        </thead>
        <tbody>
        <if condition="$award">
            <tr>
                <td>本月已完成</td>
                <td>{$award.2.count}</td>
                <td>{$award.2.money}</td>
                <td>&nbsp;</td>
            </tr>
        </if>
        </tbody>
        <tfoot>
        <tr>
            <td>总计：</td>
            <td>0</td>
            <td colspan="2">0</td>
        </tr>
        </tfoot>
    </table>

</div>

<div class="order-box">
    <h3 class="ruleTitle"><b>奖励规则：</b></h3>
    <p class="rule">
        会员分为两种：<b>汽车膜会员</b>和<b>建筑膜会员</b>。两种会员均有四个级别划分：普通会员、黄金会员、白金会员和钻石会员。
        <br /><br />
    </p>
    <h4 class="title"><b>汽车膜会员等级划分：</b></h4>
    <p class="rule">
        <b>普通会员：</b>月累计销售套数在1套-4套之间，奖励比例为销售额的10% <br />
        <b>黄金会员：</b>月累计销售套数在5套-9套之间，奖励比例为销售额的15%<br />
        <b>白金会员：</b>月累计销售套数在10套-14套之间，奖励比例为销售额的20%<br />
        <b>钻石会员：</b>月累计销售套数在15套以上，奖励比例为销售额的25%<br />
        <br/>
    </p>
    <h4 class="title"><b>建筑膜会员等级划分：</b></h4>
    <p class="rule">
        <b>普通会员：</b>月累计销售平方数在1㎡-50㎡之间，奖励比例为销售额的3%<br />
        <b>黄金会员：</b>月累计销售平方数在51㎡-150㎡之间，奖励比例为销售额的5%<br />
        <b>白金会员：</b>月累计销售平方数在151㎡-200㎡之间，奖励比例为销售额的7%<br />
        <b>钻石会员：</b>月累计销售平方数在201㎡以上，奖励比例为销售额的10%<br /><br />
    </p>
</div>


<script>
    $(function() {
        var $cate = $('#cate');
        var $goods = $('#goods');
        var $num = $('#num');

        $.getJSON("{:U('calc_data')}", function(data) {
            var calcData = data.data;

            for(var i=0; i<calcData.length; i++) {
                $cate.append($('<option value="' + calcData[i]['cid'] + '">' + calcData[i]['name'] +  '</option>'));
            }

            $cate.change(function() {
                var idx = $cate.val();
                var goods = calcData[idx - 1]['goods'];
                $goods.empty();

                if(goods && goods.length > 0) {
                    for(var i=0; i<goods.length; i++) {
                        $goods.append($('<option value="' + goods[i]['jianglie'] +  '" data-price="' + goods[i]['price'] +  '">' + goods[i]['title'] +  '</option>'));
                    }
                } else {
                    $goods.append($('<option value="">没有此类产品</option>'));
                }
            });
        });

        function calc($table) {
            var buf = [0, 0];
            $('tbody > tr', $table).each(function() {
                $tds = $(this).find('td');
                buf[0] += parseInt($tds.get(1).textContent);
                buf[1] += parseFloat($tds.get(2).textContent);
            });

//            console.log([$table.attr('id'), buf.join('|')]);
            var $footTd = $('tfoot td', $table);
            $footTd.get(1).innerText = buf[0];
            $footTd.get(2).innerText = buf[1];

            $.post("{:U('calculate')}", {cid: $table.attr('id').substr(3), num: buf[0], money: buf[1]}, function(data) {
                data = JSON.parse(data);
                if(data.status == 1) {
                   $('thead .money', $table).text('￥' + data.data + '元');
                }
            });
        }

        function removeItem() {
            var $this = $(this);
            var $table = $this.parents('table');
            $this.parents('tr').remove();
            calc($table);
        }

        $('form').submit(function(evt) {
            evt.preventDefault();

            var $tr = $('<tr></tr>');
            $tr.append($('<td>' + $goods.find('option:selected').text() + '</td>'));
            var number = parseInt($num.val());
            $tr.append($('<td>' + number + '</td>'));
            var price = parseFloat($goods.find('option:selected').data('price'));
            $tr.append($('<td>' + number * price + '</td>'));
            var $td = $('<td><a href="javascript::" data-cid="' + $cate.val() + '" data-goods="' + $goods.val() + '">移除</a></td>');
            $tr.append($td);
            $('a', $td).click(removeItem);
            var $table = $('#cid' + $cate.val());
            $('tbody', $table).append($tr);
            calc($table);
        });
    });

</script>

</body>
</html>
